<template>
  <div>
    <!-- inline:代表的是行内表单，代表一行可以放置多个表单元素 -->
    <el-form :inline="true" class="demo-form-inline" :model="cForm">
        <!-- 搜索框功能是假的，还没写 -->
      <el-form-item label="搜索框">
        <el-input placeholder="输入搜索内容" v-model="cForm.categoryContent"></el-input>
      </el-form-item>
      <el-form-item label="题型">
        <el-select placeholder="请选择" v-model="cForm.categoryTypeId" clearable filterable>
          <el-option :label="c1.type" :value="c1.id" v-for="(c1,index) in typeList" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 难度的下拉框是假的，还没写 -->
      <el-form-item label="难度">
        <el-select placeholder="请选择" v-model="cForm.categoryLevelId" clearable>
          <el-option :label="c1" :value="c1" v-for="(c1,index) in levelList" :key="c1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业" >
        <el-select placeholder="请选择"  v-model="cForm.categoryMajorId" clearable filterable>
          <el-option :label="c1.major" :value="c1.id" v-for="(c1,index) in majorList" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科目">
        <el-select placeholder="请选择"  v-model="cForm.categorySubjectId" clearable filterable>
          <el-option :label="c1.subject" :value="c1.id" v-for="(c1,index) in subjectList" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题库">
        <el-select placeholder="默认是总题库"  v-model="cForm.categoryQuestionKuId" clearable multiple>
          <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in questionKuList" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- 按钮 -->
        <el-button type="primary" icon="el-icon-search" @click="sendListId">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "CategorySelect",
  data(){
      return {
          //一堆下拉框数据列表
          majorList:[],
          subjectList:[],
          typeList:[],
          questionKuList:[],
          levelList:[1,2,3,4,5],
          //收集相应分类的id
          cForm:{
              categoryMajorId:'',
              categorySubjectId:'',
              categoryTypeId:'',
              categoryQuestionKuId:[],
              categoryLevelId:'',
              //输入框信息
              categoryContent:'',
          }
      }
  },
  //组件挂载完毕：向服务器发请求，获取所有下拉列表的值
  mounted() {
    //使用获取下拉框的数据的方法
    this.getMajorList();
    this.getSubjectList();
    this.getTypeList();
    this.getQuestionKuList();
  },
  methods: {
    //获取下拉框的数据的方法
    async getMajorList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.question_management.reqGetMajorList();
      if(result.code==20000){
          this.majorList = result.data.majorList;
      }
    },
    async getSubjectList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.question_management.reqGetSubjectList();
      if(result.code==20000){
          this.subjectList = result.data.subjectList;
      }
    },
    async getTypeList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.question_management.reqGetTypeList();
      if(result.code==20000){
          this.typeList = result.data.typeList;
      }
    },
    async getQuestionKuList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.question_management.reqGetQuestionKuList();
      if(result.code==20000){
          this.questionKuList = result.data.personalQuestionStores;
      }
    },
    sendListId(){
      //发送分类id
      this.$emit('getCategoryId',this.cForm);
    }
  },
};
</script>

<style scoped>
</style>